<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body,ul,p{
				margin:0;
				padding:0;
			}
			ul{list-style:none;}
			.bg{
				position:relative;
				top:0;
				left:0;
				margin:100px auto;
				width:100%;
				height:300px;
				background-color: gray;
			}
			.bg .msglist{
				position:absolute;
				top:-50px;
				left:100px;
				width:220px;
				height:480px;
				background-color:rgba(0,0,255,0.5);
				color:#fff;
			}
			.bg .msglist .list1{
				width:220px;
				height:50px;
				background-color:rgba(0,0,255,0.5);
				line-height:50px;
				text-indent:50px;
			}
			
			.bg .msglist .list1 .border-1{
				position:relative;
				top:22px;
				left:17px;
				width:20px;
				border-bottom:1px solid #fff;
			}
			.bg .msglist .list1 .border-2{
				position:relative;
				top:28px;
				left:17px;
				width:20px;
				border-bottom:1px solid #fff;
			}
			.bg .msglist .list1 .border-3{
				position:relative;
				top:33px;
				left:17px;
				width:20px;
				border-bottom:1px solid #fff;
			}
			.bg .msglist .list{
				width:220px;
				height:70px;
/* 				background-color: green; */
				line-height:30px;
				text-indent:20px;
				border:1px solid transparent;
				cursor:pointer;
			}
			.bg .msglist .big{
				font-size:18px;
				margin-top:5px;
				color:#fff;
			}
			.bg .msglist .small{
				font-size:14px;
				color:rgba(225,225,225,.5);
			}
			.bg .msglist .list:hover ~ .s{
				display:block;
			}
			.bg .s{
				display:none;
				position:absolute;
				top:50px;
				left:220px;
				width:900px;
				height:432px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class='bg'>
			<div class='msglist'>
				<ul>
					<li class='list1'>
							<div class='border-1'></div>
							<div class='border-2'></div>
							<div class='border-3'></div>	
						<p>全部课程</p>
					</li>
					<li class='list'>
						<p class='big'>IT-互联网</p>
						<p class='small'>前端开发 Linux运维</p>
					</li>
					<li class='list'>
						<p class='big'>设计-创作</p>
						<p class='small'>平面设计 游戏美术设计 CAD
					</li>
					<li class='list'>
						<p class='big'>语言-留学</p>
						<p class='small'>实用口语雅思托福</p>
					</li>
					<li class='list'>
						<p class='big'>职业-考证</p>
						<p class='small'>公务员教师考试建造工程</p>
					</li>
					<li class='list'>
						<p class='big'>升学-考研</p>
						<p class='small'>考研大学高中初中</p>
					</li>
					<li class='list'>
						<p class='big'>兴趣-生活</p>
						<p class='small'>摄影乐器美妆育儿</p>
					</li>
					<li class='s'></li>
				</ul>
			</div>
			
		</div>
	</body>
</html>
